<template>
  <div class="dialog" >
    <div class="dialog-header">
      <div class="img-wrapper" :class="currentHeaderClass(type)">
      </div>
      <div class="close" @click="closeDialog"></div>
    </div>
    <div class="content-desc-wrapper">
      <div class="content-desc">
        <div class="title">
          {{titleArr[type]}}
        </div>
        <div class="desc" :class="{userLogin: type === '5' || type === '6' || type === '7'}">
          {{descArr[type]}}
        </div>
      </div>
    </div>
    <div class="bottom-btn-wrapper">
      <div class="success-wrapper" v-if="type == 0"  @click="share">
        <span class="joined-success">分享赚10积分</span>
      </div>
      <div class="point-wrapper" v-if="type == 1">
        <div class="scan-wrapper"  @click="scan">
          <span class="scan">扫码赢积分</span>
        </div>
        <div class="other-wrapper" @click="lookOther">
          <span class="other">去看看别的</span>
        </div>
      </div>
      <div class="number-wrapper" v-if="type == 2" @click="lookOther">
        <span class="number">去看看别的</span>
      </div>
      <div class="ok-wrapper" v-if="type == 3 || type == 5 || type == 6 || type == 7" @click="isOk">
        <span class="ok" >确定</span>
      </div>
      <div class="down-wrapper" v-if="type == 4" @click="downApk">
        <span class="down">去下载</span>
      </div>
      <div class="point-wrapper" v-if="type == 8 || type == 9">
        <div class="update-addr-wrapper"  @click="updateAddr">
          <span class="updateAddr" v-if="type == 8">取消</span>
          <span class="updateAddr" v-if="type == 9">修改默认地址</span>
        </div>
        <div class="update-wrapper" @click="update">
          <span class="update">升级</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  const SHARE = 0
  const SCAN = 1
  const LOOK_OTHER = 2
  const IS_OK = 3;
  const DOWN_APK = 4;
  const CLOSE = 5;
  const UPDATE_ADDR = 6;
  export default {
      data() {
        return {
          titleArr: ['恭喜，参与成功！', '额，积分不足', '啊呀！手慢了！', '选择成功！', '立即参与！','版本太低啦！', '版本太低啦！','网络出错啦！','升级啦！','升级啦！'],
          descArr: ['在指定时间内，人数达到目标后即可开奖。立即分享，成功后即可获得额外积分！',
            '很遗憾，您的积分不足，暂不能参与该商品的抽奖。赶快扫条码赚双倍积分！',
            '就在上一秒被别人抢先参与了！看看其他好物吧！',
            '您已修改默认地址，请关注您的收货信息！',
            '马上下载我查查并注册登录，即可参加活动！',
            '先去个人中心手动登陆吧！',
            '去更新后参与吧！',
            '重新参与试试！',
            '默认地址即为收货地址，升级后可选择非默认地址',
            '当前版本仅支持修改默认地址，升级后可选择其他地址。'],
        }
      },
      props: {
        type: {
          type: String,
          default: '0'
        },
        shareImgUrl: {
          type: String,
          default: ""
        },
        shareTitle: {
          type: String,
          default: ""
        },
        shareConent: {
          type: String,
          default: ""
        },
        shareUrl: {
          type: String,
          default: ""
        }
      },
      methods: {
        currentHeaderClass(type) {
          if (type == 0 || type == 3) {
            return "ok-header"
          } else if (type == 1 || type == 2 || type === '5' || type === '6' || type === '7'){
            return "fail-header"
          } else if (type === '4' || type === '8' || type === '9') {
            return "join-header"
          }
        },
        share() {
          let url = '/Jfproduct/shareaddpoint' + this.wccconfig.urlParams + '&code=SHJF'
          this.$http.get(this.wccconfig.buildUrl(url)).then((response) => {
          },(error) => {
          });

          this.utils.doClickTJ('click', 'pointraised','toshare', '', '')
          if (this.utils.supportShare()) {
            this.wccia.share(this.shareTitle, this.shareConent, this.shareUrl, this.shareImgUrl, false)
            this.$emit("listenToDialog", SHARE)
          } else {
            this.type = '6'
          }
        },
        scan() {
          this.utils.doClickTJ('click', 'pointraised','toscan', '', '')
          location.href = "wccia://jump/1"
          this.$emit("listenToDialog", SCAN)
        },
        lookOther() {
          this.$emit("listenToDialog", LOOK_OTHER)
        },
        isOk() {
          this.$emit("listenToDialog", IS_OK)
        },
        closeDialog() {
          this.$emit("listenToDialog", CLOSE)
        },
        downApk() {
          this.utils.doClickTJ('click', 'pointraised','download', '', '')
          location.href = this.wccconfig.APP_DOWN_URL
          this.$emit("listenToDialog", DOWN_APK)
        },
        update() {
          location.href = "wccia://webview/" + this.wccconfig.OFFICIAL_WEB_URL
          this.$emit("listenToDialog", DOWN_APK)
        },
        updateAddr() {
          this.$emit("listenToDialog", UPDATE_ADDR)
        }
      }
    }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
  @font-face {
    font-family: gdh;
    src: url('../../../static/font/gdh.ttf');
  }
  .dialog
    position fixed
    height 100%
    width 100%
    background-color rgba(0, 0, 0, 0.7)
    z-index 1001
    left 0
    top 0
    padding-top 1.8rem
    text-align center
    .dialog-header
      text-align center
      .img-wrapper
        margin auto
        background-repeat no-repeat
        &.ok-header
          background-image url('./img/icon_success.png')
          width 5.06rem
          height 2.31rem
          background-size 5.06rem 2.31rem
        &.fail-header
          background-image url('./img/icon_fail.png')
          width 3.3rem
          height 2.33rem
          background-size 3.3rem 2.33rem
        &.join-header
          background-image url('./img/icon_header.png')
          width 5.06rem
          height 2.31rem
          background-size 5.06rem 2.29rem
      .close
        position absolute
        width .56rem
        height .56rem
        top 1.8rem
        left 6.32rem
        background-size .56rem .56rem
        background-repeat no-repeat
        background-image url('./img/icon_close_dialog.png')
    .content-desc-wrapper
      text-align center
      .content-desc
        margin 0 auto
        width 6.24rem
        height 2.75rem
        background-image url('./img/bg_dialog.png')
        background-size 6.24rem 2.75rem
        background-repeat no-repeat
        .title
          font-size .72rem
          color #482f35
          padding-top .45rem
          font-family gdh
        .desc
          text-align left
          font-size .34rem
          color #482f35
          padding .17rem .4rem .17rem .4rem
          &.userLogin
            text-align center
            margin-top .1rem
    .bottom-btn-wrapper
      width 100%
      .success-wrapper
        margin .3rem auto
        background-image url('./img/bg_btn_long_yellow.png')
        width 4.13rem
        height .8rem
        background-size 4.13rem .8rem
        background-repeat no-repeat
        line-height .8rem
        .joined-success
          font-size .38rem
          text-align center
      .point-wrapper
        margin .3rem auto
        .scan-wrapper, .update-addr-wrapper
          display inline-block
          margin-right .3rem
          width 2.12rem
          height .8rem
          background-image url('./img/bg_btn_red.png')
          background-size 2.12rem .8rem
          background-repeat no-repeat
          line-height .8rem
          .scan, .updateAddr
            font-size .34rem
        .other-wrapper, .update-wrapper
          display inline-block
          margin-left .3rem
          width 2.12rem
          height .8rem
          background-image url('./img/bg_btn_short_yellow.png')
          background-size 2.12rem .8rem
          background-repeat no-repeat
          line-height .8rem
          .other, .update
            font-size .34rem
      .number-wrapper
        margin .3rem auto
        background-image url('./img/bg_btn_long_yellow.png')
        width 4.13rem
        height .8rem
        background-size 4.13rem .8rem
        background-repeat no-repeat
        line-height .8rem
        .number
          font-size .38rem
      .ok-wrapper
        margin .3rem auto
        background-image url('./img/bg_btn_long_yellow.png')
        width 4.13rem
        height .8rem
        background-size 4.13rem .8rem
        background-repeat no-repeat
        line-height .8rem
        .ok
          font-size .38rem
      .down-wrapper
        margin .3rem auto
        background-image url('./img/bg_btn_long_yellow.png')
        width 4.13rem
        height .8rem
        background-size 4.13rem .8rem
        background-repeat no-repeat
        line-height .8rem
        .down
          font-size .38rem

</style>
